<template>
  <div>
    <div v-if="execTest">
      <div>
      <label>设备连接方式：</label>
      <el-select class="el-select-group el-select" v-model="currConnStyle">
        <el-option v-for="(op, value) in connectStyle" :key="value" :label="op.text" :value="op.value">
        </el-option>
      </el-select>
      <label>地址：</label><el-input class="el-input--small " style="width: auto" value="" placeholder="连接地址" v-model="connAddr" ></el-input>
      <label>端口：</label>
      <el-input class="el-input--small" style="width: auto" aria-placeholder="连接端口" v-model="connPort"></el-input>
      <el-button type="info" @click="connectDevice()">连接</el-button>
      <el-button type="danger" @click="disconnectDevice()">断开</el-button>
      <br/>
      <div class="connStatus">{{ connStatus }}</div>
    </div>
    <hr/>
    <div>
      <label>设备型号：</label>
      <el-select v-model="currDeviceModel" class="el-select el-select-group">
        <el-option v-for="(op, value) in deviceModels" :key="value" :label="op.text" :value="op.value"></el-option>
      </el-select>
      <el-button type="info" @click="queryTestList()">获取测试列表</el-button>
<!--      <el-input class="el-input&#45;&#45;small" style="width:auto" placeholder="测试者名称" v-model="testUser"></el-input>-->
      <el-button type="info" @click="testStart()">开始测试</el-button>
      <el-button type="danger" @click="testStop()">结束测试</el-button>
      <div class="connStatus ">{{ testResult }}</div>
    </div>
    <div id="deviceTestList">
      <label>设备测试列表：</label><br/>
      <el-table :data="deviceTestList" >
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="简述"></el-table-column>
        <el-table-column prop="content" label="描述"></el-table-column>
        <el-table-column prop="model" label="型号"></el-table-column>
        <el-table-column prop="manual" label="是否人工判定" :formatter="formatBoolean"></el-table-column>
        <el-table-column prop="step" label="测试步骤" size=100></el-table-column>
        <el-table-column prop="preResult" label="预置结果"></el-table-column>
        <el-table-column prop="realResult" label="实际结果(人工填写)" hidden>
        <template v-slot:default="scope">
          <el-input class="el-input--small" style="width:auto" placeholder="结果数据" v-if="scope.row.manual" v-model="scope.row.realResult"></el-input>
        </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作">
          <template v-slot:default="scope">
            <el-button @click="testIt(scope.row)" v-if="scope.row.manual === false">自动测试</el-button>
            <el-button @click="testManualStart(scope.row)" v-if="scope.row.manual">人工测试</el-button>
            <el-button @click="testManualDone(scope.row)" v-if="scope.row.manual">测试结果提交</el-button>
            <label>{{ scope.row.opResult }}</label>
          </template>
        </el-table-column>

      </el-table>
    </div>
    </div>
  </div>
</template>

<script>

import Vue from "vue";
import {UseUrl} from "../../utils/config";
import * as utils from "../../utils/utils"

export default {
  name: "autotest",
  data() {
    return {
      execTest:false,
      connectStyle:[
        {value: "http", text: "http"}
      ],
      currConnStyle:"http",
      connAddr:"",
      connPort:7777,
      connStatus:"Disconnected",
      deviceModels: [
        {text:"jmd", value:"jmd"},
        {text:"webfuture", value:"webfuture"}
      ],
      currDeviceModel:"jmd",
      testUser:"jmd",
      testResult:"",
      testStartId:"",
      result:{
        code:0,
        message:""
      },
      testContent: "",
      deviceTestList: [
        {
          currTestId:"",
          realResult:"",
          opResult:""
        }
      ]
    }
  },
  methods: {
    connectDevice: function() {
      var that = this;
      this.result = "连接中...";
      var params = {};
      params['connectStyle'] = this.currConnStyle;
      params['addr'] = this.connAddr;
      params['port'] = this.connPort;
      Vue.axios.post(UseUrl + "/autotest/device/connect", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.result = response.data;
        if (that.result.message === "exist")
        {
          that.connStatus = "connect:"+"success";
        }
        else {
          that.connStatus = "connect:" + that.result.message;
        }
      }).catch((error => {
        console.log(error);
        this.result = error;
      }))
    },
    disconnectDevice: function() {
      var that = this;
      this.result = "断开连接中...";
      var params = {};
      params['connectStyle'] = this.currConnStyle;
      params['addr'] = this.connAddr;
      params['port'] = this.connPort;
      Vue.axios.post(UseUrl + "/autotest/device/disconnect", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.result = response.data;
        that.connStatus = "disconnect:" + that.result.message;
      }).catch((error => {
        console.log(error);
        this.result = error;
      }))
    },
    queryTestList: function() {
      var that = this;
      this.result = "请求中...";
      Vue.axios.get(UseUrl + "/autotest/get/"+ this.currDeviceModel,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        // console.log(response.data);
        that.testResult = "queryList: " + response.data.message;
        if (response.data.code === 0) {
          that.deviceTestList = response.data.Result.items;
        }
      }).catch((error => {
        // console.log(error);
        this.testResult = error;
      }))
    },
    testStart: function() {
      if (this.testUser.length === 0)
      {
        this.testResult = "测试者不可为空";
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var testTarget = {};
      testTarget['connectStyle'] = this.currConnStyle;
      testTarget['addr'] = this.connAddr;
      testTarget['port'] = this.connPort;
      params['testTarget'] = testTarget;
      params['testUser'] = this.testUser;
      params['model'] = this.currDeviceModel;
      params['deviceId'] = this.connAddr;
      Vue.axios.post(UseUrl + "/autotest/start", JSON.stringify(params),
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "startTest:" + response.data.message;
        if (response.data.code === 0) {
          that.testStartId = response.data.result.id;
        }
      }).catch((error => {
        console.log(error);
        this.testResult = "startTest:" + error;
      }))
    },

    testStop: function() {
      if (this.testUser.length === 0)
      {
        this.testResult = "测试者不可为空";
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var testTarget = {};
      testTarget['connectStyle'] = this.currConnStyle;
      testTarget['addr'] = this.connAddr;
      testTarget['port'] = this.connPort;
      params['id'] = this.testStartId;
      params['testTarget'] = testTarget;
      params['testUser'] = this.testUser;
      params['model'] = this.currDeviceModel;
      params['deviceId'] = this.connAddr;
      var str = JSON.stringify(params);
      this.testStartId = "";
      // console.log(str);
      Vue.axios.post(UseUrl + "/autotest/stop", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "stopTest: " + response.data.message;
      }).catch((error => {
        console.log(error);
        this.testResult = "stopTest: " + error;
      }))
    },
    formatBoolean: function(row, column, cellValue) {
      var ret = ''
      if (cellValue) {
        ret = "是"
      } else {
        ret = "否"
      }
      return ret
    },
    testIt: function(row) {
      if (this.testStartId === "") {
        this.$message({
          type:"error",
          message:"请先点击开始测试"
        })
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var testTarget = {};
      testTarget['connectStyle'] = this.currConnStyle;
      testTarget['addr'] = this.connAddr;
      testTarget['port'] = this.connPort;
      params['testTarget'] = testTarget;
      params['id'] = ""; // 不需要，后台生成
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = false;
      params['content'] = row.content;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      // console.log(str);
      Vue.axios.post(UseUrl + "/autotest/test", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        this.$message({
          type:response.data.code === 0 ? "info" : "error",
          message: response.data.message
        })
      }).catch((error => {
        console.log(error);
        this.$message.error(error)
      }))
    },
    testManualStart: function(row) {
      if (this.testStartId === "") {
        this.$message.warning("请先点击开始测试");
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var testTarget = {};
      testTarget['connectStyle'] = this.currConnStyle;
      testTarget['addr'] = this.connAddr;
      testTarget['port'] = this.connPort;
      params['testTarget'] = testTarget;
      params['id'] = ""; // 不需要，后台生成
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = false;
      params['content'] = row.content;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      // console.log(str);

      Vue.axios.post(UseUrl + "/autotest/test/manual/start", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        if (response.data.code === 0)
        {
          var currId = response.data.result.id;
          row.currTestId = currId;
          console.log("current id : ", currId);
        }
          that.$message({
            "type":response.data.code === 0 ? "info" : "error",
            "message":response.data.message
          })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type": "error",
          "message": error
        })
      }))
    },
    testManualDone: function(row) {
      if (this.testStartId === "") {
        this.$message({
          "type":"error",
          "message":"请先点击开始测试"
        })
        return;
      }
      if (row.realResult === undefined || row.realResult.length === 0)
      {
        this.$message({
          "type":"error",
          "message":"请输入测试结果"
        })
        return;
      }
      // 是否有当前测试 id  的判断
      if (row.currTestId === undefined || row.currTestId.length === 0)
      {
        this.$message({
          "type":"error",
          "message":"还未开始测试此项，请先点击测试"
        })
        return;
      }
      var that = this;
      this.result = "请求中...";
      var params = {};
      var testTarget = {};
      testTarget['connectStyle'] = this.currConnStyle;
      testTarget['addr'] = this.connAddr;
      testTarget['port'] = this.connPort;
      params['testTarget'] = testTarget;
      params['id'] = row.currTestId; // 上一条命令的返回
      params['testId'] = row.id;
      params['projectId'] = this.testStartId;
      params['name'] = row.name;
      params['result'] = row.realResult === row.preResult;
      params['content'] = row.realResult;
      params['preResult'] = row.preResult;
      params['timeStart'] = 12; // 时间 不需要
      params['timeEnd'] = 12;// 时间 不需要
      var str = JSON.stringify(params);
      // console.log(str);

      Vue.axios.post(UseUrl + "/autotest/test/manual/done", str,
          {headers:{'Content-Type':'application/json; charset=utf-8'}}
      ).then((response) => {
        that.testResult = "testItemManual: " + response.data.message;
        that.$message({
          "type": response.data.code === 0 ? "info" : "error",
          "message": response.data.message
        })
      }).catch((error => {
        console.log(error);
        that.$message({
          "type": "error",
          "message": error
        })
      }))
    }
  },
  mounted() {
    // this.$refs.more.$el.click();
  },
  beforeCreate () {

  }
}
</script>

<style scoped>
#text-result{
  border:  2px aliceblue;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.connStatus {
  margin: 1em;
}

.time {
  color: gray;
}
</style>
